<template>
  <div>
    <div class="login">
      <div class="header">
        <van-nav-bar left-arrow title="会员登录" @click-left="$router.back()" />
      </div>
      <div class="content">
        <div class="title">
          <div>手机号登录</div>
          <p>未注册的手机号登录后将自动注册</p>
        </div>
        <div class="form">
          <div class="item">
            <input v-model="mobile" placeholder="请输入手机号码" type="text" />
          </div>
          <div class="item">
            <input
              v-model="picWord"
              placeholder="请输入图形验证码"
              type="text"
            />
            <img v-if="picCode" :src="picCode" alt="" @click="getCode" />
          </div>
          <div class="item">
            <input
              v-model="mobileCode"
              placeholder="请输入短信验证码"
              type="text"
              @keyup.enter="login"
            />
            <button class="btn" @click="getSecond">
              {{
                Second === totalSecond ? "获取验证码" : Second + "秒重新发送"
              }}
            </button>
          </div>
        </div>
        <van-button
          color="linear-gradient(to right, #eeb037, #fd9515)"
          @click="login"
        >
          登录
        </van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { getCode, getMsgCode, login } from '@/api/login'

export default {
  name: 'loginCom',
  components: {},
  data () {
    return {
      picCode: '', // 接收接口中的图片
      picKey: '', // 接收接口中的key
      picWord: '', // 用户输入的图形验证码
      totalSecond: 60, // 总秒数
      Second: 60, // 倒计时的秒数
      timer: null,
      mobile: '', // 用户输入的手机号
      mobileCode: '' // 用户输入的手机验证码
    }
  },
  computed: {},
  methods: {
    // 图形验证
    async getCode () {
      const {
        data: {
          data: { base64, key }
        }
      } = await getCode()
      this.picCode = base64
      this.picKey = key
    },
    // 获取验证码
    async getSecond () {
      if (!this.getVerify()) {
        return
      }
      if (!this.timer && this.Second === this.totalSecond) {
        // 请求
        await getMsgCode(this.picWord, this.picKey, this.mobile)
        this.$toast('短信发送成功，注意查收')
        // 倒计时
        this.timer = setInterval(() => {
          this.Second--
          if (this.Second <= 0) {
            clearInterval(this.timer)
            this.timer = null
            this.Second = this.totalSecond
          }
        }, 1000)
        this.$toast('发送成功，请注意查收')
      }
    },
    // 校验
    getVerify () {
      if (!/^1[3-9]\d{9}$/.test(this.mobile)) {
        this.$toast('请输入正确的手机号')
        return false
      }
      if (!/^\w{4}$/.test(this.picWord)) {
        this.$toast('请输入正确的图形验证码')
        return false
      }
      return true
    },
    // 登录
    async login () {
      if (!this.getVerify()) {
        return
      }
      if (!/^\d{6}$/.test(this.mobileCode)) {
        this.$toast('请输入正确的手机验证码')
        return false
      }
      // 抛出错误
      try {
        const { data } = await login(this.mobile, this.mobileCode)
        this.$store.commit('user/saveInfo', data.data)
        if (data.status === 200) {
          this.$toast('登录成功')
          const url = this.$route.query.backUrl || '/'
          this.$router.replace(url)
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  created () {
    this.getCode()
  },
  destroyed () {
    clearInterval(this.timer)
  }
}
</script>
<style lang="less">
.login {
  .content {
    padding: 60px 20px;

    .van-button {
      width: 100%;
      margin-top: 40px;
      border-radius: 30px;
      font-size: 20px;
    }

    .title {
      div {
        font-size: 30px;
      }

      p {
        margin-top: 15px;
        color: #c8cbce;
      }
    }

    .form {
      margin-top: 40px;

      .item {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #acacaa;
        padding: 20px 10px;
        line-height: 30px;

        img {
          width: 100px;
          height: 30px;
        }

        .btn {
          border: none;
          background-color: #fff;
          color: #fb991a;
          margin-right: 5px;
        }

        input {
          border: none;
          font-size: 17px;
        }
      }
    }
  }
}
</style>
